<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.jpg" />
    <List v-bind:arrays="list">
      <template slot="slot-list" slot-scope="List">
        <li v-bind:index="List.index">
          <span style="color:red">
            {{List.Title}}
          </span>
        </li>
      </template>
    </List>
    <hello-world v-bind:msg="message" >
    </hello-world>
    <!--在模板中将注册后的子组件直接当成标签使用就可以了-->
    <aside v-html="'作者：'+author"></aside>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue"; //引入一个子组件
import List from "@/components/List";

export default {
  name: "Home",
  //在当前作用域中注册一个子组件
  components: {
    HelloWorld,List
  },
  created() {
    this.$bus.$off("bus-event");
    this.$bus.$on("bus-event", flag => {
      console.log(`收到example发来的信息：${flag}`);
      this.$bus.$emit("bus-callback", flag);
    });
  },
  data() {
    return {
      author: '<a href="#">2019-2020软件实训2班，全体同学</a>',
      message: "欢迎使用Vue.js APP",
      isBus: false,
      list:["tom","andy","john"]
    };
  },
  methods: {}
};
</script>
